<template>
  <a-card :bordered="false" style="padding-top: 24px;width: 100%;border-radius: 4px">
    <a-form layout="inline" @submit="handleSearch">
      <div class="search">
        <div class="searchForm">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="活动标题">
                <a-input placeholder="请输入活动标题" v-model="queryForm.eventName" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`活动状态`">
                <a-select v-model="queryForm.status" placeholder="请选择活动状态" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    未开始
                  </a-select-option>
                  <a-select-option value="02">
                    进行中
                  </a-select-option>
                  <a-select-option value="03">
                    已结束
                  </a-select-option>
                  <a-select-option value="04">
                    暂停
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`优惠券类型`">
                <a-select v-model="queryForm.discountType" placeholder="请选择优惠券类型" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    活动价
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="searchBtn">
          <a-button :style="{marginTop:'10px'}" type="primary" @click="handleSearch">
            查询
          </a-button>
          <br/>
          <a-button :style="{marginTop:'10px'}" @click="handleReset">
            重置
          </a-button>
        </div>
        <div class="tableTool">
          <a-button type="primary" @click="addEventModalVisible = !addEventModalVisible">
            创建活动
          </a-button>
        </div>
      </div>
    </a-form>

    <a-table
      :rowKey="`eventNo`"
      :columns="columns"
      :data-source="data"
      :style="{marginTop:'15px',float:'left',width:'100%'}"
      :pagination="{ pageSize: 10,total:total }"
      @change="tableChange">
      <template slot="eventTime" slot-scope="text,record">
        <span>
          {{ record.eventStartTime }} 至 {{ record.eventEndTime }}
        </span>
      </template>
      <template slot="status" slot-scope="text,record">
        <span v-if="record.status == '01'">未开始</span>
        <span v-if="record.status == '02'">进行中</span>
        <span v-if="record.status == '03'">已结束</span>
        <span v-if="record.status == '04'">暂停</span>
      </template>
      <template slot="discountType" slot-scope="text,record">
        <span v-if="record.discountType == '01'">活动价</span>
      </template>
      <template slot="action" slot-scope="text,record,index">
        <a v-if="record.status == '01' || record.status == '02'" @click="handleUpdateEvent(record,index,'04')">暂停</a>
        <a v-if="record.status == '04'" @click="handleUpdateEvent(record,index,'02')">开始</a>
      </template>
    </a-table>

    <a-modal
      title="创建活动"
      :visible="addEventModalVisible"
      :width="600"
      :closable="false"
      @cancel="addEventModalVisible = !addEventModalVisible"
      @ok="handleAddEvent">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="活动标题">
          <a-input v-model="addForm.eventName" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入活动标题"/>
        </a-form-item>
        <a-form-item label="活动描述">
          <a-input v-model="addForm.eventDesc" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入活动描述"/>
        </a-form-item>
        <a-form-item label="活动时间">
          <a-range-picker
            v-model="addForm.eventTimeArray"
            :style="{width:'350px',borderRadius:'4px'}"
            :placeholder="['开始时间', '结束时间']"/>
        </a-form-item>
        <a-form-item label="是否预热">
          <a-select v-model="addForm.needPreHeat" placeholder="请选择是否预热" :style="{width:'350px',borderRadius:'4px'}">
            <a-select-option value="01">
              预热
            </a-select-option>
            <a-select-option value="02">
              不预热
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="预热时间" v-if="this.addForm.needPreHeat == '01'">
          <a-date-picker v-model="addForm.preHeatTimeDate" :style="{width:'350px',borderRadius:'4px'}"/>
        </a-form-item>
        <a-form-item :label="`优惠券类型`">
          <a-select v-model="addForm.discountType" placeholder="请选择优惠券类型" :style="{width:'350px',borderRadius:'4px'}">
            <a-select-option value="01">
              活动价
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="`订单取消时间`">
          <a-select
            v-model="addForm.orderCancelTime"
            placeholder="请选择订单取消时间"
            :style="{width:'350px',borderRadius:'4px'}">
            <a-select-option value="15m">
              15分钟
            </a-select-option>
            <a-select-option value="30m">
              30分钟
            </a-select-option>
            <a-select-option value="1h">
              1小时
            </a-select-option>
            <a-select-option value="2h">
              2h
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>

</template>

<script>
  import { queryLimitSale, addLimitSale, updateLimitSale } from '@/api/limitSale'
  import Template from '@/views/tmall/express/template'

  const columns = [
    {
      title: '活动标题',
      dataIndex: 'eventName',
      key: 'eventName'
    },
    {
      title: '活动描述',
      dataIndex: 'eventDesc',
      key: 'eventDesc'
    },
    {
      title: '活动时间',
      key: 'eventTime',
      scopedSlots: { customRender: 'eventTime' }
    },
    {
      title: '活动状态',
      key: 'status',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '优惠类型',
      key: 'discountType',
      scopedSlots: { customRender: 'discountType' }
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'LimitSales',
    components: { Template },
    data () {
      return {
        columns,
        data: [],
        total: 0,
        addEventModalVisible: false,
        queryForm: {
          eventName: '',
          status: '',
          discountType: '',
          pageNumb: 1,
          pageSize: 10
        },
        addForm: {
          eventName: '',
          eventDesc: '',
          eventTimeArray: [],
          eventStartTime: '',
          eventEndTime: '',
          needPreHeat: '',
          preHeatTimeDate: undefined,
          preHeatTime: '',
          discountType: '',
          orderCancelTime: ''
        }
      }
    },
    methods: {
      handleSearch () {
        queryLimitSale(this.queryForm).then(rsp => {
          this.data = rsp.data
          this.total = rsp.total
        })
      },
      handleReset () {
        this.queryForm = {}
      },
      handleAddEvent () {
        if (this.addForm.eventTimeArray && this.addForm.eventTimeArray.length > 0) {
          this.addForm.eventStartTime = this.addForm.eventTimeArray[0].format('YYYY-MM-DD HH:mm:ss')
          this.addForm.eventEndTime = this.addForm.eventTimeArray[1].format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.addForm.preHeatTimeDate) {
          this.addForm.preHeatTime = this.addForm.preHeatTimeDate.format('YYYY-MM-DD HH:mm:ss')
        }
        addLimitSale(this.addForm).then(rsp => {
          this.addEventModalVisible = !this.addEventModalVisible
          this.addForm = {}
          this.data.splice(this.data.length, 0, rsp)
        })
      },
      handleUpdateEvent (record, index, status) {
        updateLimitSale({ eventNo: record.eventNo, status: status }).then(rsp => {
          this.data.splice(index, 1, rsp)
        })
      },
      tableChange (pagination) {
        this.queryForm.pageNumb = pagination.current
        this.handleSearch()
      }
    },
    mounted () {
      this.handleSearch()
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
    height: 90px;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 90px;
    padding-left: 20px;
  }

  .tableTool {
    float: right;
    padding-top: 15px;
  }

  .ant-form-item-label {
    width: 100px !important;
  }
</style>
